// src/LinksDropdown.js
import React, { useEffect, useState } from 'react';
import axios from 'axios';

const LinksDropdown = () => {
  const [links, setLinks] = useState([]);
  const [selectedLink, setSelectedLink] = useState('');

  useEffect(() => {
    // Fetch the links from the backend
    axios.get('http://localhost:8080/links')
      .then(response => {
        setLinks(response.data);
      })
      .catch(error => {
        console.error('Error fetching links:', error);
      });
  }, []);

  const handleSubmit = () => {
    // Handle the form submission
    console.log('Selected Link:', selectedLink);
  };

  return (
    <div>
      <h1>Select a Link</h1>
      <select value={selectedLink} onChange={(e) => setSelectedLink(e.target.value)}>
        <option value="">Select a link</option>
        {links.map((link, index) => (
          <option key={index} value={link.url}>{link.name}</option>
        ))}
      </select>
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
};

export default LinksDropdown;
